<template>
  <div class="content">
    <!-- <div class="service">
       <img src="@/assets/images/service.png" alt="">
    </div> -->
    <div class="bg">
      <div class="header"><span>登</span><span>录</span></div>
      <!-- <div class="header"></div> -->
      <div class="footer">
        <van-form @submit="onSubmit" class="loginform">
          <van-field
            v-model="username"
            name="username"
            left-icon="phone-o"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
            ]"
          />
          <van-field
            v-model="password"
            name="password"
            left-icon="eye-o"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px" class="btn">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
            <van-button round block type="default" @click="register"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <div class="service">
      <div class="reserveProcess" @click="dialogTableVisible = true">
        <span>预约说明</span>
      </div>
      <div class="service-right" @click="handleconsult">
        <i class="el-icon-chat-dot-square"></i>
        <div class="serviceText">在线咨询</div>
      </div>
    </div>
    <div class="barcode" v-if="service">
      <img src="@/assets/images/service.png" alt="" />
    </div>
    <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false">
      <img src="@/assets/images/reserveprocess.jpg" alt="" />
      <!-- <div class="demo-image__preview">
        <el-image
          style="width: 100px; height: 100px"
          :src="reserveUrl"
          :preview-src-list="srcList"
        >
        </el-image>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
// import { getLogin } from "@/api/system/reservation";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
  data() {
    return {
      reserveUrl: require("@/assets/images/reserveprocess.jpg"),
      srcList: [],
      // 密码登录
      username: this.$route.query.iphone,
      password: null,
      // 传值
      userName: null,
      iphone: null,
      resetDatalist: null,
      service: false,
      // 弹出流程图
      dialogTableVisible: false,
    };
  },
  mounted() {
    this.srcList.push(require("@/assets/images/reserveprocess.jpg"));
  },
  methods: {
    // handleProcess() {
    //   this.dialogTableVisible = true;
    // },
    handleconsult() {
      if (!this.service) {
        this.service = true;
      } else {
        this.service = false;
      }
    },
    // getCookie() {
    //   const username = Cookies.get("username");
    //   const password = Cookies.get("password");
    //   this.loginForm = {
    //     username: username === undefined ? this.loginForm.username : username,
    //     password: password === undefined ? this.loginForm.password : decrypt(password),
    //   };
    // },
    onSubmit(values) {
      console.log("submit", values);
      this.$store.dispatch("Login", values).then(() => {
        this.$router.push({ path: "/reservation" });
      });

      // getLogin(values.phone).then((res) => {
      //   console.log(res);
      //   this.resetDatalist=res.data.historyList;
      //   this.userName = res.data.driver.name;
      //   sessionStorage.setItem("username", this.username);
      //   this.iphone = res.data.driver.phone;
      //   sessionStorage.setItem("iphone", this.iphone);
      //   this.$router.push({
      //     path: "/reservation",
      //     query: {
      //       username: this.userName,
      //       iphone: this.iphone,
      //       resetDatalist:this.resetDatalist,
      //     },
      //   });
      // });
    },
    register() {
      this.$router.push({ path: "/iregister" });
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 15px;
  // background-color: #f8f8f8;
  background: url("../assets/images/reserve.png") no-repeat;
  background-size: 100%;
  background-position: center; /* 将背景图向上移动50% */
  .van-cell {
    font-size: 16px;
  }
  ::v-deep .el-dialog {
    width: 90%;
  }
  ::v-deep .el-dialog__body {
    padding: 20px 20px;
  }
  .el-dialog__wrapper {
    img {
      width: 100%;
    }
  }
  .service {
    width: 100%;
    position: relative;
    .reserveProcess {
      height: 110px;
      width: 26px;
      text-align: center;
      position: absolute;
      background: #f5f5f556;
      color: #ffffff;
      right: 0;
      top: 30px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
    }
    .service-right {
      width: 26px;
      height: 100px;
      background: #f5f5f556;
      color: #ffffff;
      position: absolute;
      cursor: pointer;
      right: 0;
      top: 150px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      ::v-deep .el-icon-chat-dot-square:before {
        font-size: 16px;
      }
      .serviceText {
        font-size: 14px;
      }
    }
  }
  .barcode {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    img {
      width: 40%;
    }
  }
  ::v-deep .van-cell {
    background: #ffffff00;
  }
  .bg {
    // background: #ffffffb4;
    border-radius: 8px;
  }
  ::v-deep .van-field__label {
    color: #fff;
  }
  ::v-deep .van-icon-phone-o {
    color: #fff;
  }
  ::v-deep .van-icon-eye-o {
    color: #fff;
  }
  ::v-deep .van-field__control {
    color: #ffffff;
  }
  ::v-deep .van-button--default {
    color: #323233;
    background-color: #ffffff38;
    border: 1px solid #ebedf0;
  }
  .btn {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .header {
    font-size: 20px;
    margin: 80px 0 30px 0;
    padding-top: 18px;
    color: #fff;
    span {
      font-weight: 700;
      margin: 18px;
    }
  }
  .footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loginform {
      width: 100%;
    }
  }
}
</style>